<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能日程管理</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 配置Tailwind CSS -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5', // 靛蓝色作为主色调
                        secondary: '#7C3AED', // 紫色作为辅助色
                        accent: '#F59E0B', // 琥珀色作为强调色
                        success: '#10B981', // 绿色表示成功
                        warning: '#EF4444', // 红色表示警告
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .animate-fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            .schedule-item-hover {
                transition: all 0.2s ease;
            }
            .schedule-item-hover:hover {
                transform: translateY(-2px);
            }
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 加载动画屏幕 -->
    <div id="loading-screen" class="loading-screen">
        <div class="loading-container">
            <div class="big-loading-spinner"></div>
            <p class="loading-text loading-text-pulse">正在加载日程数据...</p>
        </div>
    </div>
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md fixed top-0 left-0 right-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-calendar text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-800">智能日程管理</h1>
            </div>
            
            <div class="flex items-center space-x-3">
                <button id="export-data-btn" class="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition-all flex items-center space-x-1">
                    <i class="fa fa-download"></i>
                    <span>导出数据</span>
                </button>
                <button id="import-data-btn" class="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition-all flex items-center space-x-1">
                    <i class="fa fa-upload"></i>
                    <span>导入数据</span>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-24 pb-16 main-content">
        <!-- 欢迎信息 -->
        <section class="mb-8 animate-fade-in">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800" id="welcome-message">你好，今天是</h2>
                    <p class="text-gray-500 mt-1">管理你的日程，提高工作效率</p>
                </div>
                <button id="add-schedule-btn" class="mt-4 md:mt-0 bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-full transition-all shadow-lg hover:shadow-xl flex items-center space-x-2">
                    <i class="fa fa-plus-circle"></i>
                    <span>添加日程</span>
                </button>
            </div>
        </section>

        <!-- 概览卡片 -->
        <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 animate-fade-in">
            <div class="bg-white rounded-xl p-6 card-shadow cursor-pointer hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1" id="today-schedule-card">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-700">今日日程</h3>
                    <span class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                        <i class="fa fa-calendar-check-o text-primary"></i>
                    </span>
                </div>
                <p class="text-3xl font-bold text-gray-800" id="today-schedule-count">0</p>
                <p class="text-sm text-gray-500 mt-2">较昨日 <span id="yesterday-difference" class="text-success">+0</span></p>
            </div>
            <div class="bg-white rounded-xl p-6 card-shadow cursor-pointer hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1" id="upcoming-schedule-card">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-700">即将截止</h3>
                    <span class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center">
                        <i class="fa fa-clock-o text-accent"></i>
                    </span>
                </div>
                <p class="text-3xl font-bold text-gray-800" id="upcoming-schedule-count">0</p>
                <p class="text-sm text-gray-500 mt-2">在接下来的24小时内</p>
            </div>
            <div class="bg-white rounded-xl p-6 card-shadow">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-700">已完成</h3>
                    <span class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                        <i class="fa fa-check-circle text-success"></i>
                    </span>
                </div>
                <p class="text-3xl font-bold text-gray-800" id="completed-schedule-count">0</p>
                <p class="text-sm text-gray-500 mt-2">完成率 <span class="text-success" id="completion-rate">0%</span></p>
            </div>
        </section>

        <!-- 日历组件 -->
        <section class="bg-white rounded-xl p-6 card-shadow mb-8">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-lg font-semibold text-gray-700">月视图日历</h3>
                <div class="flex items-center space-x-2">
                    <button id="prev-month" class="p-2 rounded-full hover:bg-gray-100 text-gray-600">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <div class="flex items-center space-x-2 flex-1 justify-center">
                        <!-- 年份选择器 -->
                        <div class="relative">
                            <button id="year-selector" class="px-3 py-1 rounded-md hover:bg-gray-100 text-gray-800 font-medium flex items-center">
                                <span id="current-year">2023</span>
                                <i class="fa fa-chevron-down ml-1 text-xs"></i>
                            </button>
                            <div id="year-dropdown" class="absolute z-10 hidden bg-white shadow-lg rounded-md w-32 max-h-60 overflow-y-auto mt-1">
                                <!-- 年份选项将通过JavaScript动态生成 -->
                            </div>
                        </div>
                        <span class="text-gray-600">年</span>
                        <!-- 月份选择器 -->
                        <div class="relative">
                            <button id="month-selector" class="px-3 py-1 rounded-md hover:bg-gray-100 text-gray-800 font-medium flex items-center">
                                <span id="current-month">10</span>
                                <i class="fa fa-chevron-down ml-1 text-xs"></i>
                            </button>
                            <div id="month-dropdown" class="absolute z-10 hidden bg-white shadow-lg rounded-md w-32 mt-1">
                                <!-- 月份选项将通过JavaScript动态生成 -->
                            </div>
                        </div>
                        <span class="text-gray-600">月</span>
                    </div>
                    <button id="next-month" class="p-2 rounded-full hover:bg-gray-100 text-gray-600">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                </div>
                <div class="mt-2 flex justify-end">
                    <button id="back-to-current-month" class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-full opacity-0 transition-all duration-300 transform translate-y-2 pointer-events-none">
                        <i class="fa fa-calendar-check-o mr-1"></i>本月
                    </button>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table id="calendar-table" class="w-full border-collapse">
                    <thead>
                        <tr class="text-gray-600">
                            <th class="text-center py-3 font-medium">日</th>
                            <th class="text-center py-3 font-medium">一</th>
                            <th class="text-center py-3 font-medium">二</th>
                            <th class="text-center py-3 font-medium">三</th>
                            <th class="text-center py-3 font-medium">四</th>
                            <th class="text-center py-3 font-medium">五</th>
                            <th class="text-center py-3 font-medium">六</th>
                        </tr>
                    </thead>
                    <tbody id="calendar-body">
                        <!-- 日历内容将通过JavaScript动态生成 -->
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 图表和分类 -->
        <section class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8 animate-fade-in">
            <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-semibold text-gray-700">日程统计</h3>
                    <div class="flex space-x-2">
                            <button id="stats-today" class="text-sm text-primary font-medium px-3 py-1 rounded-full bg-primary/10">本日</button>
                            <button id="stats-this-week" class="text-sm text-gray-500 px-3 py-1 rounded-full hover:bg-gray-100">本周</button>
                            <button id="stats-this-month" class="text-sm text-gray-500 px-3 py-1 rounded-full hover:bg-gray-100">本月</button>
                            <button id="stats-this-year" class="text-sm text-gray-500 px-3 py-1 rounded-full hover:bg-gray-100">全年</button>
                        </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="h-64">
                        <h4 class="text-md font-medium text-gray-600 mb-2">分类统计</h4>
                        <canvas id="schedule-chart"></canvas>
                    </div>
                    <div class="h-64">
                        <h4 class="text-md font-medium text-gray-600 mb-2">完成率统计</h4>
                        <canvas id="completion-rate-chart"></canvas>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl p-6 card-shadow">
                <div class="mb-6">
                            <h3 class="text-lg font-semibold text-gray-700">日程分类</h3>
                        </div>
                <div class="space-y-3">
                    <button class="category-btn w-full flex items-center justify-between p-3 rounded-lg" data-category="工作">
                        <div class="flex items-center">
                            <span class="rounded-full bg-primary mr-2"></span>
                            <span class="text-gray-700 font-medium">工作</span>
                        </div>
                        <span class="text-sm text-gray-500 font-medium" id="category-count-work">0 个日程</span>
                    </button>
                    <button class="category-btn w-full flex items-center justify-between p-3 rounded-lg" data-category="学习">
                        <div class="flex items-center">
                            <span class="rounded-full bg-secondary mr-2"></span>
                            <span class="text-gray-700 font-medium">学习</span>
                        </div>
                        <span class="text-sm text-gray-500 font-medium" id="category-count-study">0 个日程</span>
                    </button>
                    <button class="category-btn w-full flex items-center justify-between p-3 rounded-lg" data-category="生活">
                        <div class="flex items-center">
                            <span class="rounded-full bg-red-500 mr-2"></span>
                            <span class="text-gray-700 font-medium">生活</span>
                        </div>
                        <span class="text-sm text-gray-500 font-medium" id="category-count-life">0 个日程</span>
                    </button>
                    <button class="category-btn w-full flex items-center justify-between p-3 rounded-lg" data-category="健康">
                        <div class="flex items-center">
                            <span class="rounded-full bg-success mr-2"></span>
                            <span class="text-gray-700 font-medium">健康</span>
                        </div>
                        <span class="text-sm text-gray-500 font-medium" id="category-count-health">0 个日程</span>
                    </button>
                    <button class="category-btn w-full flex items-center justify-between p-3 rounded-lg" data-category="其他">
                        <div class="flex items-center">
                            <span class="rounded-full bg-gray-400 mr-2"></span>
                            <span class="text-gray-700 font-medium">其他</span>
                        </div>
                        <span class="text-sm text-gray-500 font-medium" id="category-count-other">0 个日程</span>
                    </button>
                </div>
            </div>
        </section>

        <!-- 日程列表 -->
        <section class="animate-fade-in">
            <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-6">
                <h3 class="text-xl font-bold text-gray-800">日程总览</h3>
                <div class="w-full md:w-auto flex flex-wrap gap-2">
                    <!-- 搜索框 -->
                    <div class="relative w-full md:w-auto flex-grow md:flex-grow-0">
                        <input 
                            type="text" 
                            id="schedule-search" 
                            placeholder="搜索日程..." 
                            class="pl-9 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-full md:w-64 text-sm"
                        >
                        <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    </div>
                    
                    <!-- 状态过滤按钮 -->
                    <div class="flex space-x-2">
                        <button id="filter-all" class="text-sm text-primary font-medium px-3 py-1 rounded-full bg-primary/10">全部</button>
                        <button id="filter-pending" class="text-sm text-gray-500 px-3 py-1 rounded-full hover:bg-gray-100">待办</button>
                        <button id="filter-completed" class="text-sm text-gray-500 px-3 py-1 rounded-full hover:bg-gray-100">已完成</button>
                    </div>
                    
                    <!-- 时间范围过滤按钮 -->
                    <div class="flex space-x-2">
                        <button id="range-all" class="text-sm text-primary font-medium px-3 py-1 rounded-full bg-primary/10">全部时间</button>
                        <button id="range-week" class="text-sm text-gray-500 px-3 py-1 rounded-full hover:bg-gray-100">本周</button>
                        <button id="range-month" class="text-sm text-gray-500 px-3 py-1 rounded-full hover:bg-gray-100">本月</button>
                        <button id="range-year" class="text-sm text-gray-500 px-3 py-1 rounded-full hover:bg-gray-100">本年</button>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl card-shadow overflow-hidden">
                <!-- 固定的表头 -->
                <div class="sticky top-0 z-10 bg-white">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-gray-50 border-b border-gray-200">
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">日程名称</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">时间</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">分类</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">状态</th>
                                <th class="px-6 py-4 text-right text-sm font-semibold text-gray-600">操作</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <!-- 可滚动的内容区域 -->
                <div class="max-h-[50vh] overflow-y-auto overflow-x-hidden">
                    <table class="w-full">
                        <tbody id="schedule-list">
                            <!-- 日程列表将通过JavaScript动态生成 -->
                            <tr class="text-center">
                                <td colspan="5" class="px-6 py-12 text-gray-500">
                                    <div class="flex flex-col items-center">
                                        <i class="fa fa-calendar-o text-4xl mb-3 text-gray-300"></i>
                                        <p>暂无日程</p>
                                        <p class="text-sm mt-1">点击上方"添加日程"按钮创建你的日程</p>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <i class="fa fa-calendar text-primary text-xl"></i>
                    <span class="text-gray-600 font-medium">智能日程管理</span>
                </div>
                <div></div>
            </div>
            <div class="text-center text-sm text-gray-500 mt-6">
                © 2025 智能日程管理. 保留所有权利.
            </div>
        </div>
    </footer>

    <!-- 今日日程模态框 -->
    <div id="today-schedule-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
        <div class="bg-white rounded-xl w-full max-w-lg mx-4 card-shadow animate-fade-in max-h-[80vh] overflow-hidden flex flex-col">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold text-gray-800">今日日程</h3>
                    <button id="close-today-modal-btn" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="p-6 overflow-y-auto overflow-x-hidden flex-grow" id="today-schedule-list">
                <!-- 今日日程将在这里动态显示 -->
            </div>
        </div>
    </div>

    <!-- 即将截止日程模态框 -->
    <div id="upcoming-schedule-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
        <div class="bg-white rounded-xl w-full max-w-lg mx-4 card-shadow animate-fade-in max-h-[80vh] overflow-hidden flex flex-col">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold text-gray-800">即将截止的日程</h3>
                    <button id="close-upcoming-modal-btn" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="p-6 overflow-y-auto overflow-x-hidden flex-grow" id="upcoming-schedule-list">
                <!-- 即将截止的日程将在这里动态显示 -->
            </div>
        </div>
    </div>

    <!-- 添加日程模态框 -->
    <div id="add-schedule-modal" class="fixed inset-0 bg-black/50 z-40 hidden items-center justify-center">
        <div class="bg-white rounded-xl w-full max-w-md mx-4 card-shadow animate-fade-in">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h3 id="modal-title" class="text-xl font-bold text-gray-800">添加日程</h3>
                    <button id="close-modal-btn" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <form id="schedule-form">
                    <div class="mb-4">
                        <label for="schedule-title" class="block text-sm font-medium text-gray-700 mb-1">日程名称</label>
                        <input type="text" id="schedule-title" name="title" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="输入日程名称" required>
                    </div>
                    <div class="mb-4">
                        <label for="schedule-description" class="block text-sm font-medium text-gray-700 mb-1">日程描述</label>
                        <textarea id="schedule-description" name="description" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="输入日程描述"></textarea>
                    </div>
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <label for="schedule-date" class="block text-sm font-medium text-gray-700 mb-1">日期</label>
                            <input type="date" id="schedule-date" name="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                        </div>
                        <div>
                            <label for="schedule-time" class="block text-sm font-medium text-gray-700 mb-1">时间</label>
                            <input type="time" id="schedule-time" name="time" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="schedule-category" class="block text-sm font-medium text-gray-700 mb-1">分类</label>
                        <select id="schedule-category" name="category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                            <option value="工作">工作</option>
                            <option value="学习">学习</option>
                            <option value="生活">生活</option>
                            <option value="健康">健康</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-2">
                            <label class="flex items-center">
                                <input type="checkbox" id="schedule-reminder" name="reminder" class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary">
                                <span class="ml-2 block text-sm text-gray-700">设置提醒</span>
                            </label>
                            <select id="reminder-time" name="reminderTime" class="w-32 px-2 py-1 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" disabled>
                                <option value="5">提前5分钟</option>
                                <option value="10">提前10分钟</option>
                                <option value="15">提前15分钟</option>
                                <option value="30">提前30分钟</option>
                                <option value="60">提前1小时</option>
                                <option value="1440">提前1天</option>
                            </select>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3">
                        <button type="button" id="cancel-schedule-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                        <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <input type="file" id="file-import" accept=".json" style="display: none;" />
    
    <!-- 自定义确认对话框 -->
    <!-- 分类日程弹窗 -->
      <div id="category-schedule-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
          <div class="bg-white rounded-xl w-full max-w-3xl mx-4 card-shadow animate-fade-in h-[80vh] w-[90vw] max-w-3xl overflow-hidden flex flex-col">
              <div class="p-6 border-b border-gray-200">
                  <div class="flex justify-between items-center">
                      <h3 class="text-xl font-bold text-gray-800" id="category-modal-title">分类日程</h3>
                      <button id="close-category-modal-btn" class="text-gray-400 hover:text-gray-600">
                          <i class="fa fa-times"></i>
                      </button>
                  </div>
              </div>
              <div class="p-6">
                  <!-- 搜索和筛选区域 -->
                  <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-6">
                      <!-- 搜索框 -->
                      <div class="relative w-full md:w-auto flex-grow md:flex-grow-0">
                          <input 
                              type="text" 
                              id="category-search" 
                              placeholder="搜索该分类下的日程..." 
                              class="pl-9 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-full md:w-64 text-sm"
                          >
                          <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                      </div>
                       
                      <!-- 状态过滤按钮 -->
                      <div class="flex space-x-3">
                          <button id="category-status-all" class="text-sm text-primary font-medium px-4 py-2 rounded-lg bg-primary/10">全部</button>
                          <button id="category-status-pending" class="text-sm text-gray-500 px-4 py-2 rounded-lg">待办</button>
                          <button id="category-status-completed" class="text-sm text-gray-500 px-4 py-2 rounded-lg">已完成</button>
                      </div>
                       
                      <!-- 时间范围过滤按钮 -->
                      <div class="flex flex-wrap gap-2">
                          <button id="category-range-today" class="text-sm text-gray-500 px-4 py-2 rounded-lg">本日</button>
                          <button id="category-range-week" class="text-sm text-gray-500 px-4 py-2 rounded-lg">本周</button>
                          <button id="category-range-month" class="text-sm text-gray-500 px-4 py-2 rounded-lg">本月</button>
                          <button id="category-range-year" class="text-sm text-gray-500 px-4 py-2 rounded-lg">本年</button>
                          <button id="category-range-all" class="text-sm text-gray-500 px-4 py-2 rounded-lg">全部时间</button>
                      </div>
                  </div>
                   
                  <!-- 日程列表 -->
                  <div class="overflow-y-auto overflow-x-hidden flex-grow" id="category-schedule-list">
                      <!-- 分类日程将在这里动态显示 -->
                      <div class="text-center py-12 text-gray-500">
                          <div class="flex flex-col items-center">
                              <i class="fa fa-calendar-o text-4xl mb-3 text-gray-300"></i>
                              <p>该分类下暂无日程</p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <div id="confirm-dialog" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-2xl p-6 max-w-md w-full mx-4 animate-fade-in">
            <h3 id="confirm-title" class="text-xl font-bold text-gray-800 mb-2">确认操作</h3>
            <p id="confirm-message" class="text-gray-600 mb-6">您确定要执行此操作吗？</p>
            <div class="flex justify-end space-x-3">
                <button id="confirm-cancel" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                <button id="confirm-ok" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">确认</button>
            </div>
        </div>
    </div>
    
    <!-- 日期日程模态框 -->
    <div id="day-schedule-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
        <div class="bg-white rounded-xl w-full max-w-lg mx-4 card-shadow animate-fade-in max-h-[80vh] overflow-hidden flex flex-col">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h3 id="day-schedule-modal-title" class="text-xl font-bold text-gray-800">日程列表</h3>
                    <button id="close-day-schedule-modal-btn" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="p-6 overflow-y-auto overflow-x-hidden flex-grow" id="day-schedule-list">
                <!-- 日程列表将动态生成 -->
                <div class="text-center py-8 text-gray-500">
                    <p>该日期暂无日程</p>
                </div>
            </div>
            <div class="p-6 border-t border-gray-200 flex justify-between">
                <button id="add-day-schedule-btn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center space-x-2">
                    <i class="fa fa-plus"></i>
                    <span>添加日程</span>
                </button>
                <button id="close-day-schedule-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                    关闭
                </button>
            </div>
        </div>
    </div>
    
    <script src="app.js"></script>
    <script src="notification_functions.js"></script>
    
    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary/70 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 opacity-0 pointer-events-none z-50 hover:bg-primary/90">
        <i class="fa fa-arrow-up"></i>
    </button>
    
    <script>
        const backToTopButton = document.getElementById('back-to-top');
        
        // 滚动显示/隐藏按钮
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopButton.classList.remove('opacity-0', 'pointer-events-none');
                backToTopButton.classList.add('opacity-100', 'pointer-events-auto');
            } else {
                backToTopButton.classList.remove('opacity-100', 'pointer-events-auto');
                backToTopButton.classList.add('opacity-0', 'pointer-events-none');
            }
        });
        
        // 点击返回顶部
        backToTopButton.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    </script>
</body>
</html>